<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar :title="$route.name" left-arrow />
    <!-- 搜索视图 -->
    <van-search v-model="searchInfo" placeholder="iphone" />
    <div class="sortInfo">
      <!-- 侧边栏 -->
      <van-sidebar @change="changeBar" v-model="activeKey">
        <van-sidebar-item
          v-for="item in catelist"
          :key="item.id"
          :title="item.catename"
        />
      </van-sidebar>
      <!-- 商品宫格展示 -->
      <van-grid :gutter="10" :column-num="3">
        <van-grid-item :to="'/list?id='+item.id" v-for="item in secondCate" :key="item.id">
          <img class="imgUrl" :src="item.img" alt="" />
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getCateTree } from "../util/axios";
export default {
  data() {
    return {
      searchInfo: "",
      activeKey: 0,
      catelist: [],
      secondCate: [],
    };
  },
  mounted() {
    //组件一加载调用获取方法
    this.getCateList();
  },
  methods: {
    //封装一个获取树结构的方法
    async getCateList() {
      this.catelist = await getCateTree();
      //为了赋值二级分类 初始值
      this.secondCate = this.catelist[this.activeKey].children;
      console.log(this.catelist, "分类数据");
    },
    //封装一个切换侧边分类事件
    changeBar() {
      console.log(this.activeKey, "activeKey");
      this.secondCate = this.catelist[this.activeKey].children;
    },
  },
};
</script>

<style scoped>
.imgUrl {
  width: 1.2rem;
  height: 1.2rem;
}
.sortInfo {
  display: flex;
}
.van-grid {
  flex: 1;
}
</style>
